<template>
  <div class="iconsArea">
    <!--单独的标题栏，使用block性质的div标签要好于inline性质的span标签-->
    <div class="title">出行服务</div>
    <div class="iconsPart">
      <div class="iconsInfo" :key="item.id" v-for="item in list">
        <img :src="item.imgUrl" alt="picture" class="img" />
        <p class="des">{{item.desc}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
.iconsArea
/* iconsArea的height应容纳进里面所有的元素 */
/* 即title，与iconsPart */
 width: 100%
 height: 3.8rem
 /* 定义与上方swiper栏之间的距离 */
 margin-top: .2rem
 /* 定义iconsArea与下方元素之间的距离 */
 margin-bottom: .2rem
 .iconsPart
   width:100%
   height: 3.2rem
   display: flex
   flex-direction: row-reverse
   flex-wrap: wrap
   .iconsInfo
    height: 1.5rem
    width: 25%
    /* 由于iconsInfo下面有两个子元素des与img，所以需要使用position属性给其定位 */
    position: relative
   .des
     position: absolute
     font-size: large
     min-width: 1.4rem
     right: 0
     bottom: 0
     left: 0
   .img
     width: 1rem
     height: 1rem
     position: absolute
     left: 0
     top: 0
     right: 0
     /* 使得图片img居中显示 */
     /* 为什么img需要这样设置而des不需要？ */
     /* 因为img设置好了宽度与高度，而des的宽度刚好等于iconsInfo的宽度 */
     margin: 0 auto
 .title
   /* 设置widtd使得该content的宽度刚好容纳title */
   /* 随后可以根据margin来确定位置 */
   width: 1.5rem
   margin-left: .16rem
   margin-bottom: .1rem
   font-weight: bold
   font-size: large
 /*.iconMedium
   display: flex
   flex-direction: row
   width: 100%
   height: 1.5rem
   .middlePart
    position: relative
    width: 20%
    .des1
     position: absolute
     min-width: 1.4rem
     right: 0
     bottom: 0
     left: 0
    .print
     position: absolute
     top: 0
     right: 0
     left: 0
     width: 1rem
     height: 1rem
     margin: 0 auto
 .iconBig
   !* 父系元素进行display:flex布局，那么在该父系元素以下的子元素可以很好地设置宽度 *!
   display: flex
   !* 使upperPart元素方块水平方向排列 *!
   flex-direction: row
   !* 父系元素的宽度为100%完全撑开 *!
   width: 100%
   height: 1.5rem
   .upperPart
     !* 在水平方向上，父元素iconBig占据100%的宽度，子元素有5个，则各占据20% *!
     width: 20%
     position: relative
     .des
       position: absolute
       !*top: 1.15rem*!
       !*对right，left，bottom进行调整比较好*!
       !*尤其是bottom: 0比top: 1.15rem来得更加直观*!
       left: 0
       bottom: 0
       right: 0
       min-width: 1.4rem
     .img
       width: 1rem
       height: 1rem
       position: absolute
       left: 0
       top: 0
       right: 0
       margin: 0 auto*/
</style>
